<template>
  <el-card>
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item :label="forWho + '姓名'" prop="childName">
        <el-input
          v-model="queryParams.childName"
          :placeholder="'请输入' + forWho + '姓名'"
          clearable
          size="small"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item
        :label="forWho + '月龄'"
        prop="monthAge"
        v-if="forWho == '孩子'"
      >
        <el-input
          v-model="queryParams.monthAge"
          :placeholder="'请输入' + forWho + '月龄'"
          clearable
          size="small"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item :label="booker + '邮箱'" prop="email">
        <el-input
          v-model="queryParams.email"
          :placeholder="'请输入' + booker + '邮箱'"
          clearable
          size="small"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item :label="booker + '手机号码'" prop="phone">
        <el-input
          v-model="queryParams.phone"
          :placeholder="'请输入' + booker + '手机号码'"
          clearable
          size="small"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="预约日期" prop="bookDate">
        <el-date-picker
          clearable
          size="small"
          v-model="queryParams.bookDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择预约日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时间段">
        <el-time-picker
          v-model="timeFrame"
          is-range
          format="HH:mm"
          value-format="HH:mm"
          :style="{ width: '100%' }"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          range-separator="至"
          clearable
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" style="margin-top: 8px">
      <el-col :span="24">
        <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column label="预约日期" prop="bookDate"> </el-table-column>
          <el-table-column label="预约时间段">
            <template slot-scope="scope">
              {{ scope.row.startTime }}至{{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column :label="forWho + '姓名'" align="center">
            <template slot-scope="scope">
              <a
                style="text-decoration: underline; color: blue"
                @click="showDetail(scope.row)"
                >{{ scope.row.childName }}</a
              >
            </template>
          </el-table-column>
          <el-table-column label="预约状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status == 1">完成</el-tag>
              <el-tag type="info" v-if="scope.row.status == 0">已预约</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 2">爽约</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 3"
                >已取消</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="380">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                v-if="notOverDue(scope.row.bookDate,scope.row.endTime)&&scope.row.status == 0"
                @click="signStatus(3, '取消预约', scope.row)"
                >取消预约</el-button
              >
              <el-button
                size="mini"
                type="success"
                v-if="scope.row.status == 0"
                @click="signStatus(1, '标记完成', scope.row)"
                >标记完成</el-button
              >
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.status == 0"
                @click="signStatus(2, '标记爽约', scope.row)"
                >标记爽约</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <el-dialog :visible.sync="showMoreDialog" width="500px" append-to-body>
      <el-table :data="detail">
        <el-table-column
          :label="booker + '姓名'"
          prop="childName"
        ></el-table-column>
        <el-table-column
          :label="booker + '月龄'"
          prop="monthAge"
          v-if="booker == '孩子'"
        ></el-table-column>
        <el-table-column
          :label="booker + '手机号'"
          prop="phone"
        ></el-table-column>
        <el-table-column
          :label="booker + '邮箱'"
          prop="email"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  listByDoctorId,
  listBook,
  getBook,
  delBook,
  addBook,
  updateBook,
} from "@/api/parent/book";
export default {
  name: "doctorSeeABooked",
  data() {
    return {
      tableData: [],
      total: 100,
      timeFrame: "",
      forWho: "孩子",
      booker: "家长",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      detail: [],
      showMoreDialog: false,
      updatebody: {},
    };
  },
  methods: {
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
    getList() {
      if (this.timeFrame) {
        this.queryParams.startTime = this.timeFrame[0];
        this.queryParams.endTime = this.timeFrame[1];
      }
      listByDoctorId(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
      });
    },
    signStatus(status, msg, row) {
      if(status==3&&!this.judgeNotOverdue(row.bookDate,row.endTime)) {
        this.$message.warning("该预约已过期")
        return
      }
      this.updatebody = row;
      const originStatus = row.status;
      var v = this;
      this.$modal
        .confirm("确认要" + msg + "吗？")
        .then(function () {
          v.updatebody.status = status;
          return updateBook(v.updatebody);
        })
        .then(() => {
          v.getList();
          v.$modal.msgSuccess(msg + "成功");
        })
        .catch(function () {
          v.$modal.msg(msg + "失败");
          row.status = originStatus;
        });
    },
    showDetail(row) {
      this.detail = [];
      this.detail.push(row);
      this.showMoreDialog = true;
    },
  },
  created() {
    this.getList();
    this.getConfigKey("sys.forWho").then((response) => {
      this.forWho = response.msg;
    });
    this.getConfigKey("sys.booker").then((response) => {
      this.booker = response.msg;
    });
  },
  computed: {
    notOverDue() {
      return (date, time) => {
        return this.judgeNotOverdue(date, time);
      };
    },
  },
};
</script>

<style scoped>
</style>


